<template>
    <div class="xxx">
        <el-dialog
            :title="
                dialog_type == 1
                    ? '核销产品'
                    : dialog_type == 2
                    ? '核销详情'
                    : '核销券码'
            "
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            width="800px"
        >
            <div class="context-box">
                <div class="search-box" v-if="dialog_type == 3">
                    <el-input
                        v-model="chno"
                        placeholder="请输入券码"
                        class="input-w"
                    ></el-input>
                    <el-button @click="searchFun">搜索</el-button>
                </div>
                <!--  -->
                <div v-show="tableData.length > 0">
                    <div class="user-info-box">
                        <div class="info-data-left">
                            <div class="img-box">
                                <img
                                    :src="
                                        infoObj.avatar
                                            ? infoObj.avatar
                                            : img_buf
                                    "
                                />
                            </div>
                            <div class="title-data">
                                <div class="title">{{ infoObj.uname }}</div>
                                <div class="phone">{{ infoObj.cellphone }}</div>
                            </div>
                        </div>
                        <div class="info-data-right">
                            <div class="time-box">
                                <span class="tit">下单时间:</span>
                                <span>{{ infoObj.atime_txt }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="table-box">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column
                                prop="chno"
                                label="券码"
                                width="200"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="hdno"
                                label="活动编号"
                                width="100"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="gdname"
                                label="产品名称"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="number"
                                label="产品数量"
                                width="100"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="status_ck_txt"
                                label="券码状态"
                                width="100"
                                align="center"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="btnDiv">
                        <el-button size="small" @click="btnFun(1)"  type="primary">客户签名</el-button>
                    </div>
                    <div class="dsecImgBox">
                        <el-input size="small" style="width: 500px;" placeholder="请输入内容" v-model="img_ck">
                            <template slot="append"><span @click="chooseImg" class="dsecSpan">图片备注上传</span></template>
                        </el-input>
                        <div class="dsecImgDiv" v-show="img_ck">
                            <el-image 
                                style="width: 100px; height: 100px"
                                :src="img_ck" 
                                :preview-src-list="[img_ck]">
                            </el-image>
                        </div>
                    </div>
                    <div class="txt">
                        <span v-if="dialog_type == 2"
                            >核销备注: {{ infoObj.txt_ck }}</span
                        >
                        <el-input
                            size="small"
                            v-model="txt_ck"
                            placeholder="请输入核销备注"
                            v-else
                        ></el-input>
                    </div>
                </div>
                <div
                    slot="footer"
                    class="dialog-footer"
                    v-show="tableData.length > 0"
                >
                    <el-button
                        @click="dialogbutFun"
                        :type="dialog_type == 2 ? 'danger' : 'primary'"
                        >{{
                            dialog_type == 2 ? "撤回核销" : " 立即核销"
                        }}</el-button
                    >
                    <el-button @click="dialogVisible = false">取 消</el-button>
                </div>
            </div>
            <SignCanvasDom ref="SignCanvasDom" :uploadPicObj="uploadPicObj"></SignCanvasDom>
        </el-dialog>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import SignCanvasDom from "@/components/interactive/SignCanvasDom/index.vue";
import uploadPic from "@/js/upload/UploadPic.js";
import staticConst from "@/js/const/StaticConst.js";

export default {
    props: [],
    components: {
        SignCanvasDom,
    },
    computed: {},
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            dialogVisible: false,
            dialog_type: "", //核销弹框类型
            infoObj: {},
            tableData: [],
            chno: "",
            txt_ck: "",
            img_ck: "",
            uploadPicObj: {
                idyun: '',
                activeId: '',
            },
        };
    },
    created() {},
    mounted() {},
    methods: {
        chooseImg()
        {
            let that = this;
            uploadPic.idyun = this.uploadPicObj.idyun;
            uploadPic.activeId = this.uploadPicObj.activeId;
            uploadPic.type = staticConst.UPLOAD_INTER_ACTIVE;
            uploadPic.uploadSussecc = uploadSuccess;
            
            function uploadSuccess(data)
            {
                that.img_ck = data.url;
            }
        },
        btnFun (type) {
            if (type == 1) {
                this.$refs.SignCanvasDom.dialogVisible = true;
            }
        },
        initData(data) {
            this.infoObj = data.item || {};
            this.tableData = data.item ? [data.item] : [];
            this.dialog_type = data.type;
            this.dialogVisible = true;
        },
        dialogbutFun() {
            this.dialogVisible = false;
            if (this.dialog_type == 2) {
                //撤回核销
                const data = {
                    act: "ck_cancel",
                    odid: this.infoObj.id,
                };
                this.$emit("immediatelyFun", data);
            } else {
                // 立即核销
                const data = {
                    act: "ck_do",
                    odid: this.infoObj.id,
                    txt_ck: this.txt_ck,
                };
                this.$emit("immediatelyFun", data);
            }
        },
        searchFun() {
            this.getListFun();
        },
        async getListFun() {
            let url = config.HD_ORDER_ORDER_LS;
            let param = {
                ch: "order",
                chno: this.chno,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.ls) {
                this.tableData = [res.data.ls[0]];
                this.infoObj = res.data.ls[0];
                this.uploadPicObj.activeId = this.infoObj.hdongid
                this.uploadPicObj.idyun = this.infoObj.shopid_yd
            } else if (!res.data.ls || !res.data.ls.langth) {
                this.$msg({ title: "订单记录不存在" });
            }
        },
    },
};
</script>

<style lang="scss" scoped >
.context-box {
    ::v-deep.search-box {
        .input-w {
            width: calc(100% - 70px);
            .el-input__inner {
                border-right: none;
                border-radius: 4px 0 0 4px;
                &:focus {
                    border-color: #dcdfe6;
                }
            }
        }
        .el-button {
            border-radius: 0 4px 4px 0;
        }
    }
    .user-info-box {
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info-data-left {
            display: flex;
            .img-box {
                margin-right: 10px;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .title-data {
                .title {
                }
                .phone {
                }
            }
        }
        .info-data-right {
            .time-box {
                .tit {
                    font-weight: bold;
                    margin-right: 10px;
                }
            }
        }
    }
    ::v-deep.table-box {
        margin-bottom: 20px;
        .el-table__body-wrapper {
            padding-bottom: 0;
        }
    }
    .btnDiv {
        margin-bottom: 10px;
    }
}
.dsecImgBox {
    margin: 10px 0;
    .dsecSpan {
        cursor: pointer;
    }
    .dsecImgDiv {
    }
}
.dialog-footer {
    text-align: center;
    margin-top: 20px;
}
</style>
